<template>
	<view class="content">
		<view class="top-box">
			<view class="welcome">
				<navigator url="/pages/index/index" class="welcome-out">×</navigator>
				<navigator class="welcome-register" url="/pages/register/register" hover-class="navigator-hover">登录
				</navigator>
			</view>
			<view class="welcome-two">
				<view class="top-signin">{{signin}}</view>
				<view class="top-welcome">{{welcome}}</view>
			</view>
		</view>
		<view class="lower">
			<view class="picture">
				<image src="../../static/go.png"></image>
			</view>
			<view class="lower-box">
				<view class="login">手机注册</view>
				<view class="link">
					<!--判断手机号-->
					<input style="font-size: 25rpx;" class="inputText" placeholder="请输入您的手机号" type="text"
						v-model="phone" />
				</view>
				<view class=" link " style="display: flex;">
					<!--判断验证码-->
					<input style="font-size: 25rpx;" placeholder="请输入验证码" />
					<view>
						<view style=";
						  " class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
							</u-code>
							<view @tap="getCode">
								<text class="Company" style=" color:#3F76EE ; 	
		                       border: 1rpx solid #3F76EE; ">
									{{tips}}
								</text>
							</view>
						</view>
					</view>
				</view>
<!-- 							<view class="sign" style="width: 400rpx;"
					formType="submit" @click="getPhones"  open-type="switchTab">立即注册</view> -->
				<button class="sign" style="width: 400rpx;" formType="submit" @click="getPhones">立即注册</button>
				<view class="group">
					<image bindtap="onWXClick"
						style=" position: absolute;top:100rpx;   width: 120rpx; height: 100rpx;"
						src="../../static/group.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				signin: '注册',
				welcome: '欢迎来到公共服务',
				phone: '',
				tips: '',
				// refCode: null,
				seconds: 10,
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '获取中'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			async getPhones() {
				uni.setStorageSync('phone',this.phone),
				console.log('你点击了按钮')
				let one = await axios({			
					method:'post',
					url: 'http://192.168.1.56:9091/register',				
					data: {
						phonenumber: this.phone,
						loginName:this.phone,
					}
				})
				.then(res => {
					if (res.data.code == 500) {
						console.log(res.data.msg)
					} else if (res.data.code == 0) {
						console.log(res.data.msg)
						uni.redirectTo({
							url: '../more/more'
						});
					} else {
						console.log(res.data.msg)
					}
					console.log(res, '发送了请求，接收的数据')
				})
				let two = await axios({
					method: 'get',
					url: this.url.list,
				}).then(res => {
					this.formData = res.data
				})
			}
		}
	}
</script>

<style>
	* {}

	.content {
		background-color: #3F76EE;
	}

	.welcome {
		display: flex;
		justify-content: space-between;
		padding-top: 60upx;
	}

	.welcome-two {
		margin-top: 35upx;
	}

	.top-box {
		color: aliceblue;
		widows: 100vw;
		height: 400upx;
		padding-left: 50upx;
	}

	.top-signin {
		font-size: 45upx;
	}

	.top-welcome {
		font-size: 30upx;
		margin-top: 15upx;
		font-weight: bold;
	}

	.welcome-out {
		font-size: 50upx;
	}

	.welcome-register {
		margin-right: 50upx;
	}

	.picture image {
		margin-left: 100upx;
		margin-top: -80upx;
		width: 600upx;
		height: 450upx;
	}

	.lower {
		margin-top: -30upx;
		width: 100vw;
		border-radius: 60upx 60upx 0upx 0upx;
		background-color: #FFFFFF;
	}

	.input {
		font-size: 25upx;
	}

	.lower-box view {
		margin-left: 80upx;
		padding-top: 40upx;
	}

	.obtain {
		position: absolute;
		left: 100upx;
		/* border: 1px solid #3F76EE; */
		border-radius: 60px;
		width: 200upx;
		height: 10upx;
		position: relative;
		/* color: #3F76EE; */
	}

	.code {
		position: absolute;
		top: 10upx;
		left: 40upx;
		font-size: 25upx;
	}

	.login {
		font-size: 30upx;
		font-weight: bold;
		color: #3F76EE;
	}

	.group {
		position: absolute;
		left: 230upx;
	}

	.sign {
		border: 1rpx solid #ccc;
		border-radius: 60rpx;
		margin-top: 80upx;
		font-size: 28upx;
		color: #f7f7f8;
		background-color: #3F76EE;
		text-align: center;
		line-height: 40px;
		margin-left: 170rpx;
		font-weight: bold;
	}

	.link {
		height: 42rpx;
		border-bottom: 1upx solid #ccc;
		width: 80%;
	}

	.letter {
		margin-top: -5upx;
		margin-left: 150upx;
		font-size: 25upx;
		width: 200upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
	}

	.Company {
		position: absolute;
		top: 940rpx;
		left: 510rpx;
		font-size: 25rpx;
		border: 1rpx solid #3F76EE;
		border-radius: 30rpx;
		padding: 5rpx;
	}
</style>
